﻿<div>
    <h4>Right gradient</h4>
    <FluentHorizontalScroll class="right-gradient" Speed="600" Easing="ScrollEasing.EaseInOut">
        <FluentCard>Card number 1</FluentCard>
        <FluentCard>Card number 2</FluentCard>
        <FluentCard>Card number 3</FluentCard>
        <FluentCard>Card number 4</FluentCard>
        <FluentCard>Card number 5</FluentCard>
        <FluentCard>Card number 6</FluentCard>
        <FluentCard>Card number 7</FluentCard>
        <FluentCard>Card number 8</FluentCard>
        <FluentCard>Card number 9</FluentCard>
        <FluentCard>Card number 10</FluentCard>
        <FluentCard>Card number 11</FluentCard>
        <FluentCard>Card number 12</FluentCard>
        <FluentCard>Card number 13</FluentCard>
        <FluentCard>Card number 14</FluentCard>
        <FluentCard>Card number 15</FluentCard>
        <FluentCard>Card number 16</FluentCard>
    </FluentHorizontalScroll>

    <h4>Gradient both sides</h4>
    <FluentHorizontalScroll class="both-gradient" Speed="600" Easing="ScrollEasing.EaseInOut">
        <FluentCard>Card number 1</FluentCard>
        <FluentCard>Card number 2</FluentCard>
        <FluentCard>Card number 3</FluentCard>
        <FluentCard>Card number 4</FluentCard>
        <FluentCard>Card number 5</FluentCard>
        <FluentCard>Card number 6</FluentCard>
        <FluentCard>Card number 7</FluentCard>
        <FluentCard>Card number 8</FluentCard>
        <FluentCard>Card number 9</FluentCard>
        <FluentCard>Card number 10</FluentCard>
        <FluentCard>Card number 11</FluentCard>
        <FluentCard>Card number 12</FluentCard>
        <FluentCard>Card number 13</FluentCard>
        <FluentCard>Card number 14</FluentCard>
        <FluentCard>Card number 15</FluentCard>
        <FluentCard>Card number 16</FluentCard>
    </FluentHorizontalScroll>
</div>